<template>
  <div class="register-container">
    <div class="picker-wrapper" @click="onPickerClicked">
      <span v-if="selectedBank !== ''">{{ selectedBank.text }}</span>
      <span v-else>Choose Bank</span>
      
      </div>

    <cube-input v-model="realname" type="text" placeholder="Real Name" />
    <cube-input v-model="cardNumber" type="text" placeholder="Account Number" />

    <cube-button @click="onSubmit" primary >Submit</cube-button>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Api } from "@/api";
import Cookie from "js-cookie";
declare const $Vue: Vue;

const pickerData = [
  { text: "AliPay", value: 1 },
  { text: "WechatPay", value: 2 },
  { text: "PayPal", value: 3 }
];
@Component
export default class addCreditCard extends Vue {

  private picker: any = null;
  private realname: any = '';
  private cardNumber: any = '';
  private selectedBank: any = {};


  protected mounted() {
    $Vue.$emit('title', {
      message: 'Add Card',
    });
  }

  private onPickerClicked() {
    if (this.picker === null) {
      this.picker = this.$createPicker({
        title: "Choose Bank",
        data: [pickerData],
        onSelect: this.selectHandle,
        onCancel: this.cancelHandle,
        cancelTxt: 'Cancel',
        confirmTxt: 'Confirm',
      });
    }
    this.picker.show();
  }

  private selectHandle(value: any) {
    let selected = pickerData[value - 1];
    this.selectedBank = selected;
  }

  private cancelHandle() {}


  private onSubmit() {
    let message = '';
    if (this.realname === '') {
      message = 'Invalid name';
    }

    if (this.cardNumber === '') {
      message = 'Invalid account number';
    }

    if (this.selectedBank.value === '') {
      message = 'Invalid bank card';
    }
    if (message !== '') {
      return this.$createToast({
        txt: message,
        type: "warn",
        time: 3000
      }).show();
    }

    this.addCreditCard();
    
  }

  private async addCreditCard() {
    const params: any = {
      userId: Cookie.get("buyer_userId"),
      cardMobilePhone: this.realname,
      bankId: this.selectedBank.value,
      bankName: this.selectedBank.text,
      cardNumber: this.cardNumber,
    };
    const { data } = await Api.addCreditCard.r(params);
    console.log("getSingleUserInfo", data);
    if (data.result === 0) {
      this.$createToast({
        txt: "Added successfully.",
        type: "warn",
        time: 3000
      }).show();
      this.$router.go(-1)
    } else {
      this.$createToast({
        txt: "Something has gone wrong.",
        type: "warn",
        time: 3000
      }).show();
    }
  }


}
</script>

<style lang="less" scoped>
.cube-input {
  width: 100% !important;
}
.register-container {
  display: flex;
  flex-direction: column;
  padding: 30% 14%;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
      background: #fcfcfc;
  .picker-wrapper {
    width: 100%;
    height: 3rem;
    color: #7d7d7d;
    border: 1px solid #dadada;
    border-radius: 8px;
    line-height: 3rem;
  }
}
</style>
